<template>
<div>
  <van-nav-bar
      left-text="返回"
      left-arrow
      class="return"
      @click-left="onClick"

  />
  <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="search"
      autocomplete
  >
    <template #action>
      <van-button color="#F00000" @click="search" size="small">搜索</van-button>
<!--      <button @click="search">搜索</button>-->
    </template>
  </van-search>

<!--搜索历史-->
  <SearchHistory :his="ser"/>

<!--  热门新闻标题-->
  <vue-lazy-component  tagName="div"><HotNewList :ser="value"/></vue-lazy-component>
</div>
</template>

<script>
import HotNewList from "@/views/Search/components/HotNewList";
import SearchHistory from "@/views/Search/components/SearchHistory";
export default {
name: "SearchPage",
  data(){
    return{
       value:'',
       ser:'',//搜索
       his:'',//搜索历史
    }
  },
  components: {
    SearchHistory,
     HotNewList
  },
  created(){
    this.$store.commit("changeActive", {Active: 1})
    localStorage.setItem("Active",JSON.stringify(1))
  },
  methods:{
    onClick(){
      this.$router.go(-1);
    },
    search(){
      this.ser = this.value
      console.log(this.value)
    },
  }
}
</script>

<style scoped lang="less">
//.return{
//  height:30px;
//}
.history{
  display:flex;
  justify-content: center;
  align-items: center;
}
/deep/.van-search__action{
  margin-top:-5px;
}
</style>